const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin(),
    ],
    module: { // 加载器配置
        rules: [ // 数组规则
            { // 一个加载器规则和使用
                test: /\.css$/i, // 匹配以.css结尾的文件名, i是忽略大小写
                // 加载器使用是从右向左, 先解析打包, 才能使用插入
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                // less-loader内部使用less包翻译less代码, 将 Less 文件编译为 CSS 文件
                // 注意: 还要用css-loader和style-loader支持css文件
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i, // 匹配以.png或者.jpg或.gif结尾文件名
                use: [{
                    loader: 'url-loader', // 文件->base64打包进js中
                    options: { // 如果文件超出此限制就会交给file-loader处理(原封不动改名输出到dist下)
                        limit: 8192, // 1kb=1024b, 8kb=8192b
                    },

                    // 为什么?
                    // 图片->base64, 体积会变大30%, 得不尝试
                }, ],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                    },
                }, ],
            },
            // 抽离css
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.m?js$/, // \.只匹配.  匹配.js 匹配.mjs结尾的文件
                exclude: /(node_modules|bower_components)/, // 排除node_module和bower_components文件夹下的js
                // node_modules下的第三方包无需降级处理 (提高babel转义速度)
                // 第三方jquery3.6 - 你本身就没考虑低版本问题
                // 直接下jquery1.8
                use: {
                    loader: 'babel-loader', // wepback+babel转义自己js代码
                    options: {
                        presets: ['@babel/preset-env'] // 预设-支持哪些情况
                    }
                }
            }
        ],
    },

    // 开发环境推荐:
    // mode: "development", // webpack打包模式 (以开发环境配置打包)
    // // 开发环境不会压缩到极致, 适用于编写代码的环境 (默认启用sourcemap-记录代码打包之前行数和位置信息)
    // devtool: "cheap-module-source-map" // devtool针对soucemap如何记录代码位置信息的一个配置项

    // .map里保存的就是对应文件里代码的打包前位置信息

    // 上线环境推荐:
    mode: "production",
    devtool: "source-map"
};